<template>
	<uni-header title="提现">
		<template #right>
			<view class="u-h-right" @click="withdrawal">
				<image src="../../static/tixian-log.png" mode=""></image>
				<text>提现记录</text>
			</view>
		</template>
	</uni-header>
	<view class="header">
		<image class="bg" src="../../static/tixian-icon.png" mode=""></image>
		<view class="content">
			<text class="income" style="margin-bottom: 20rpx;margin-top: 48rpx;">可提现金额(B)</text>
			<text class="income-power">00.00</text>

		</view>
		<view class="content">
			<text class="income">冻结金额(B)</text>
			<text class="income-power" style="font-size: 40rpx;">00.00</text>

		</view>
	</view>
	<view class="form-item">
		<text class="label">提现币种</text>
		<text class="value">USDT</text>
	</view>
	<view class="form-item">
		<text class="label">提现网络</text>
		<text class="value">TRC20</text>
	</view>
	<view class="bank" v-if="bank" @click="to_bank">
		<text class="label">提现地址</text>
		<view class="bank-card">
			<view class="left">
				<!-- <image src="" mode=""></image> -->
				<view class="">
					<text class="name">{{bank.bankCardNo}}</text>
					<!-- <text class="area">上海田林支行·张三</text> -->
				</view>
			</view>
			<image src="/static/right.png" mode=""></image>
		</view>
	</view>

	<view class="input">
		<text class="label">提现金额</text>
		<view class="price-input">
			<text>¥</text>
			<input type="number" v-model="amount" />
		</view>
		<text class="desc">最小提现金额100.00</text>
	</view>
	<button class="submit" @click="submit">提交</button>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		walletPw,
		bankList
	} from '@/util/api.js'
	import {
		onShow
	} from '@dcloudio/uni-app'
	const withdrawal = () => {
		uni.navigateTo({
			url: "/pages/withdrawalLog/withdrawalLog"
		})
	}
	onShow(()=>{
		console.log('show')
		uni.$on('bank',(data)=>{
			
			bank.value = data
		})
	})
	const amount = ref()
	const bank = ref()
	bankList().then(res => {
		res.data.map(item => {
			if (item.isDel == 1) {
				bank.value = item
			}
		})
		if (!bank.value) {
			bank.value = res.data[0]
		}
	})
	const to_bank = () => {
		uni.navigateTo({
			url: "/pages/bank/bank?state=1"
		})
	
	}
	const submit = () => {
		if (amount.value <= 0) {
			uni.showToast({
				icon: "none",
				title: "输入正确金额"
			})
			return false
		}
		walletPw({
			amount: amount.value,
			type: 1,
			addrUrl: bank.value.bankCardNo
		}).then(res => {

			window.location.href = res.data.url
		})
	}
</script>

<style lang="scss" scoped>
	.form-item {
		width: 622rpx;
		margin: 0 auto;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #f7f7f7;

		.label {
			color: #999;
			font-size: 32rpx;
		}

		.value {
			color: #333;
			font-size: 32rpx;
			font-weight: 600;
		}

	}

	.submit {
		width: 686rpx;
		height: 92rpx;
		background: #1E53E7;
		border-radius: 16rpx;
		position: absolute;
		bottom: 68rpx;
		left: 32rpx;
		color: #fff;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 92rpx;
	}

	.label {
		display: block;
		color: #181D29;
		font-size: 28rpx;
	}

	.input {
		width: 622rpx;
		height: 220rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		border: 2rpx solid #E8EBF5;
		padding: 32rpx;
		margin: 32rpx auto;

		.price-input {
			width: 622rpx;
			height: 112rpx;
			display: flex;
			border-bottom: 2rpx solid #E8EBF5;
			align-items: center;

			text {
				color: #181D29;
				font-weight: 500;
				font-size: 64rpx;
				display: block;
			}

			input {
				display: block;
				flex: 2;
				height: 112rpx;
				margin-left: 30rpx;
				font-size: 64rpx;
				color: #181D29;
				font-weight: 500;
			}
		}

		.desc {
			color: #A3A7B2;
			font-size: 24rpx;
			display: block;
			margin-top: 32rpx;
		}
	}

	.bank {
		width: 622rpx;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: 32rpx auto;
		border: 2rpx solid #E8EBF5;
		padding: 32rpx;

		.bank-card {
			margin-top: 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			>image {
				display: block;
				width: 40rpx;
				height: 40rpx;
			}

			.left {
				display: flex;
				align-items: center;

				>image {
					display: block;
					width: 68rpx;
					height: 68rpx;
					margin-right: 16rpx;
					border-radius: 50%;
					background: palevioletred;
				}

				view {
					.name {
						display: block;
						color: #181D29;
						font-size: 32rpx;

					}

					.area {
						color: #A3A7B2;
						font-size: 24rpx;
					}
				}
			}
		}
	}

	.u-h-right {
		display: flex;
		align-items: center;
		margin-right: 32rpx;

		image {
			display: block;
			width: 40rpx;
			height: 40rpx;
		}

		text {
			display: block;
			margin-left: 10rpx;
			font-size: 32rpx;
			color: #181D29;
			font-weight: 500;
		}
	}

	.header {
		width: 100%;
		height: 368rpx;
		position: relative;
		overflow: hidden;
	}

	.bg {
		display: block;
		width: 686rpx;
		height: 368rpx;
		position: absolute;
		left: 32rpx;
	}

	.title {
		color: #181D29;
		display: block;
		margin: 32rpx;
		font-weight: 500;
		font-size: 36rpx;
	}

	.content {
		position: relative;
		padding: 0 64rpx;
		height: 172rpx;
		display: flex;
		// align-items: center;
		flex-direction: column;
		justify-content: center;
		// background: red;
	}

	.income {
		display: block;
		color: #fff;
		font-size: 24rpx;
		// margin:32rpx 0 15rpx 32rpx;
	}

	.income-power {
		color: #fff;
		font-size: 64rpx;
		font-weight: 700;
		display: block;
		// margin:0 0 15rpx 32rpx;
	}
</style>